<template>
  <div class="custom-flex-cont-vertical">
    <!--搜索条件-->
    <shrink-form @confirm="query()">
      <template>
        <el-form-item id="sid1" label="机构代码">
          <el-input v-model="queryParams.code" placeholder="输入组织机构代码"></el-input>
        </el-form-item>
        <el-form-item id="sid2" label="机构名称">
          <el-input v-model="queryParams.name" placeholder="输入组织机构名称"></el-input>
        </el-form-item>
        <el-form-item id="sid3" label="机构简称">
          <el-input v-model="queryParams.shortName" placeholder="输入组织机构简称"></el-input>
        </el-form-item>
        <!--<el-form-item label="上级机构">-->
        <!--<org v-model="queryParams.pcode"></org>-->
        <!--</el-form-item>-->
        <el-form-item id="sid4" label="机构类型">
          <org-type v-model="queryParams.type"></org-type>
        </el-form-item>
        <el-form-item id="sid5" label="状态">
          <available v-model="queryParams.state"></available>
        </el-form-item>
      </template>
    </shrink-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEditForm()" v-if="hasPerm('org-add')">
        <i class="fa fa-plus-circle"></i>&nbsp;新增机构
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length===0" @click="enablePerms(null, true)" v-if="hasPerm('org-enable')">
        <i class="fa fa-unlock"></i>&nbsp;启用机构
      </el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length===0" @click="enablePerms(null, false)" v-if="hasPerm('org-enable')">
        <i class="fa fa-lock"></i>&nbsp;禁用机构
      </el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length===0" @click="deletePerms()" v-if="hasPerm('org-del')">
        <i class="fa fa-trash"></i>&nbsp;删除机构
      </el-button>
    </el-row>
    <!--查询结果列表-->
    <div class="custom-flex-cont fit-all">
      <div class="custom-flex-cont-vertical custom-shadow left-contain" style="margin-right: 10px;width: 250px;"
        v-loading="treeLoading">
        <empty-tip v-if="!orgData"></empty-tip>
        <el-tree v-else ref="leftTree" :data="orgData" node-key="id" :props="{label: 'text', children: 'children'}"
                 highlight-current default-expand-all :expand-on-click-node="false"
                 @node-click="handOrgTreeClick" style="height:700px;overflow-y: scroll;">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <el-badge v-if="data.available>=0" is-dot class="state-dot" :type="data.available===1?'success':'danger'" />
          </div>
        </el-tree>
      </div>
      <div class="custom-flex-cont-vertical fit-all custom-shadow" style="flex: 1;">
        <el-table
          v-loading="loading"
          :data="tableData"
          @selection-change="multiSelectedChange">
          <template slot="empty">
            <empty-tip></empty-tip>
          </template>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="40">
          </el-table-column>
          <el-table-column
            prop="code"
            label="机构代码">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="机构名称">
          </el-table-column>
          <el-table-column
            prop="shortName"
            label="简称">
          </el-table-column>
          <el-table-column
            label="上级机构">
            <template slot-scope="scope">
              {{scope.row.parent?scope.row.parent.name:'-'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="机构类型">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
            <template slot-scope="scope">
              <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
              <el-tag type="danger" size="medium" v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('org-edit')">
                <el-button type="text" @click="openAddEditForm(scope.row)"><i class="fa fa-edit"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="禁用" v-if="hasPerm('org-enable')&&scope.row.state===1">
                <el-button type="text" @click="enablePerms(scope.row.id, false)"><i class="fa fa-ban text-danger"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="启用" v-if="hasPerm('org-enable')&&scope.row.state===0">
                <el-button type="text" @click="enablePerms(scope.row.id, true)"><i class="fa fa-check-circle text-success"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('org-del')">
                <el-button type="text" @click="deletePerms(scope.row.id)"><i class="fa fa-trash text-danger"></i></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="custom-pagination"
          @current-change="query"
          :current-page.sync="queryParams.pageNumber"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableDataTotal"
          style="text-align:right;">
        </el-pagination>
      </div>
    </div>

    <!--新增/修改权限-->
    <add-edit-org v-if="showOrgForm" :show.sync="showOrgForm" :orgData="editData"></add-edit-org>
  </div>
</template>

<script>
  import Available from '../../common/AvailableSelect'
  import Org from '../../common/OrgSelect'
  import OrgType from '../../common/OrgTypeSelect'
  import AddEditOrg from './AddEditOrgDialog'
  import ShrinkForm from '../../common/ShrinkForm'
  import EmptyTip from "../../common/EmptyTip";

  export default {
    name: "index",
    components: {
      EmptyTip,
      ShrinkForm,
      AddEditOrg,
      Available,
      OrgType,
      Org
    },
    data() {
      return {
        loading: false,
        showOrgForm: false,
        editData: null,
        // 查询参数配置
        queryParams: {
          code:'',
          name:'',
          shortName:'',
          pcode: '',
          parentname: '',
          type: '',
          typename: '',
          state: '',
          pageNumber: 1,
          pageSize: 10
        },
        // 结果列表参数
        tableData: [],
        tableDataTotal: 0,
        selectedRows: [],
        // 左侧树菜单
        treeLoading: false,
        orgData: null,
        checkedOrg: null
      }
    },
    mounted: function(){
      this.query();
    },
    methods: {
      query: function(currPage){
        if(!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/system/org/list', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
        this.queryTree();
      },
      queryTree() {
        this.treeLoading = true;
        this.api.post('/bucket-system/system/org/all', {})
          .then((data) => {
            let _d = {id:'', text:'全部', children:data.data};
            this.orgData = [_d];

            this.$nextTick(()=>{
              if(this.checkedOrg)
                this.$refs.leftTree.setCurrentKey(this.checkedOrg);
            });

            this.treeLoading = false;
          });
      },
      handOrgTreeClick(e) {
        this.queryParams.pcode = e.id;
        this.checkedOrg = e.id;
        this.query();
      },
      openAddEditForm: function(data){
        if(data)
          this.editData = data;
        else
          this.editData = null;
        this.showOrgForm = true;
      },
      multiSelectedChange: function(val){
        this.selectedRows = val;
      },
      deletePerms: function(id){
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if(!id && this.selectedRows.length>0){
              this.selectedRows.forEach(function(_s, index, arr){
                _ids.push(_s.id);
              });
            }else
              _ids.push(id);
            this.api.post('/bucket-system/system/org/delete', {id: _ids.join(',')})
              .then((data) => {
                if(data.code===200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                }else{
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      enablePerms: function(id, enable){
        let _ids = [];
        let _url = '/bucket-system/system/org/disable';
        if(!id && this.selectedRows.length>0){
          this.selectedRows.forEach(function(_s, index, arr){
            _ids.push(_s.id);
          });
        }else
          _ids.push(id);
        if(enable)
          _url = '/bucket-system/system/org/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if(data.code===200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            }else{
              this.$message.error(data.data);
            }
          });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .left-contain {
    /*padding: 10px;*/
    .custom-tree-node {
      position: relative;
      width: 100%;
      span {
        margin-right: 20px;
      }
    }
  }
  .state-dot {
    position: absolute;
    top: 4px;
    right: 10px;
    float: right;
  }
</style>
